<template>
    <view class="contianer">
        <image src="/static/my/my_top_bg.png" class="top_bg"/>
		<view class="flex-column a_item" @click="navTo('/pages/user/index')">
			<image :src="props.cover === null ? '/static/my/default_avar.png' : props.cover" class="cover" mode="aspectFill"/>
			<span class="userName">{{ props.realName }}</span>
		</view>
        <view class="sets">
            <view class="s_item" v-for="item in setList" :key="item.id" @click="navTo(item.path)">
                <image :src="item.icon" class="s_icon"/>
                <text>{{ item.title }}</text>
            </view>
        </view>
        <view class="list">
            <view class="l_item" v-for="(items,index) in list" :key=" items.id" @click="navTo(items.path)">
                <view class="flex-row" style="justify-content: space-between;align-items: center; width: 100%;padding-bottom: 28rpx;">
                    <view class="left">
                        <image :src="items.icon" class="item_icon"/>
                        <text>{{ items.title }}</text>
                    </view>
                    <view class="right">
                        <image src="/static/my/icon_arrow.png" class="arrow" />
                    </view>
                </view>
                <view class="line" v-show="index !== list.length - 1" ></view>
            </view>
        </view>
        <contactModal :show=show @onClose ="handleClose" />
    </view>
</template>

<script setup>
    import { ref, reactive, onMounted} from 'vue';
    import contactModal from '@/components/contactModal/index.vue';
    import { onLoad, onShow } from '@dcloudio/uni-app';
    import { getUserInfoApi } from '@/apis/index';
    import { hasLogin, Toast } from '@/utils/tools';
    // const userInfo = reactive({
    //     cover: '/static/my/default_avar.png',
    //     realName: '未登录',
    // })
	const props = defineProps({
		realName:{
			type:String,
			default: '未登录'
		},
		cover:{
			type: String,
			default: '/static/my/default_avar.png'
		}
	})
    const setList = [
        {id:0, title: '商城', icon: '/static/my/shop.png', path: '/shop'},
        {id:1, title: '我的订单', icon: '/static/my/order.png', path: '/pages/order/index'},
        {id:2, title: '个人资料', icon: '/static/my/info.png', path: '/pages/user/index'}
    ]
    const list = [
        // {id:0, title: '设置', icon: '/static/my/set.png', path: '/pages/set/index'},
        {id:1, title: '联系我们', icon: '/static/my/contact.png', path: '/'},
        {id:2, title: '意见反馈', icon: '/static/my/feedback.png', path: '/pages/feedback/index'}
    ]
    const show = ref(false);
    onMounted(()=>{
        // getUserInfo();
    })
    const getUserInfo =  async () =>{
        const { obj } = await getUserInfoApi()
        userInfo.realName = obj.realname; 
        userInfo.cover = obj.avar;
    }
    const navTo = (url) => {
        if(hasLogin()){
            if(url === '/'){
                show.value = true
            }else if(url === '/shop'){
                Toast({title: '紧锣密鼓开发中，敬请期待哦～', duration: 2000})
            }else{
                uni.navigateTo({
                    url: url
                })
            }
        } else {
            uni.navigateTo({
                url: '/pages/login/index'
            })
        }
    }
    const handleClose = ()=>{
        show.value = false
    }
</script>

<style lang="scss">
	.contianer{
		width:100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        .top_bg{
            width: 100%;
            height: 450rpx;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .cover{
            width: 118rpx;
            height: 118rpx;
            border-radius: 59rpx;
            margin-top: 116rpx;
        }
        .userName{
            margin-top: 8rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 44rpx;
        }
        .sets{
            width: calc(100% - 52rpx);
            height: 240rpx;
            background-color: #FFFFFF;
            box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
            border: 2rpx solid #FFFFFF;
            border-radius: 40rpx;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            margin-top: 44rpx;
            .s_item{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .s_icon{
                    width: 72rpx;
                    height: 72rpx;
                }
                text{
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #333333;
                    margin-top: 12rpx;
                }
            }
        }
        .list{
            width: calc(100% - 52rpx);
            background-color: #FFFFFF;
            box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
            border: 2rpx solid #FFFFFF;
            border-radius: 40rpx;
            padding-top: 8rpx;
            padding-bottom: 12rpx;
            margin-top: 20rpx;
            .l_item{
                margin-left: 26rpx;
                margin-right: 24rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 32rpx;
                .left{
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    .item_icon{
                        width: 48rpx;
                        height: 48rpx;
                    }
                    text{
                        margin-left: 6rpx;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #333333;
                    }
                }
                .right{
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    .arrow{
                        width: 48rpx;
                        height: 48rpx;
                    }
                }
                .line{
                    width: 626rpx;
                    height: 0rpx;
                    border-bottom: 1rpx solid rgba(0,0,0,0.1);
                }
            }   
        }
	}
</style>